<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/common/common.jsp" %>
</head>
<body>
<div class="right-container">
    <div class="container-select text-left">
        <div class="search-input">
            <span>角色名称：</span>
            <input id="roleName" name="roleName" type="text">
        </div>

        <button id="searchBtn" class="btn btn-primary" type="button">
            <i class="fa fa-search"></i> 查询
        </button>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
        </div>
    </div>
</div>

<!-- page specific plugin scripts -->
<script src="${basePath}/plugins/jqGrid/jquery.jqGrid.min.js${VERSION}"></script>
<script src="${basePath}/plugins/jqGrid/grid.locale-cn.js${VERSION}"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    var roleName;
    var roleId;
    jQuery(function ($) {
        CommonUtils.grid({
            url: "${basePath}/mobileRole/getPageRows",
            colNames: ['角色ID','角色名称', '角色描述'],
            colModel: [
                {name: 'id', index: 'id', key: true, width: 40, sorttype: "int"},
                {name: 'roleName', index: 'roleName', width: 50},
                {name: 'roleDesc', index: 'roleDesc', width: 80},
            ],
            multiselect: true,
            multiboxonly: true,
            onSelectRow: function(id){
                roleName = $("#grid-table").jqGrid('getRowData',id).roleName;
                roleId = $("#grid-table").jqGrid('getRowData',id).id;
            }
        });
        $('#grid-table').setGridHeight("180px");
        $("#searchBtn").click(function () {
            query();
        });

        function query() {
            var queryData = {
                "roleName": $.trim($('#roleName').val())
            };
            $("#grid-table").jqGrid("setGridParam", {
                        postData: queryData
                    }
            ).trigger("reloadGrid", [{page: 1}]);
        };
    });
</script>
</body>
</html>